<template>
	<view class="content">
		<view class="form">
			<view class="phone">
				<text class="icon tel"></text> <input type="text" placeholder="请输入手机号" v-model="user.mobile">
			</view>
			<view class="password ">
				<text class="icon lock"></text> <input type="text" password placeholder="请输入密码" v-model="user.password">
			</view>
			<view class="code">
				<text class="icon dun"></text> <input type="text" placeholder="请输入验证码" v-model="user.vercode"><button
					@click="sendSms" class="vercode">发送验证码</button>
			</view>

			<button class="btn">确定</button>
		</view>
	</view>
</template>

<script>
	import users from '@/apis/users/index.js'
	import {
		ref,
		toRefs,
		reactive
	} from 'vue';
	export default {
		onLoad() {
			uni.setNavigationBarColor({
				backgroundColor: '#0f9209',
				frontColor: "#ffffff"
			})

		},
		setup() {
			const state = reactive({
				user: {
					mobile: "",
					password: "",
					vercode: ""
				}
			})

			const sendSms = () => {

				if (!state.user.mobile) {
					uni.showToast({
						title: "必须填写手机号"
					})
					return;
				}

				var reg1 = /^1[3|4|5|6|7|8]\d{9}$/;
				if (!reg1.test(state.user.mobile)) {
					uni.showToast({
						title: "手机格式不正确"
					})
					return;
				}

				users.send_sms({
					mobile: state.user.mobile,
					type: "register"
				}).then(res => {
					console.log(res);

					uni.showToast({
						title: "发送成功"
					})

				}).catch(err => {
					console.log(err);
				})


			}

			const register = () => {}


			return {
				...toRefs(state),
				sendSms,
				register
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {}

	.form {

		view {
			display: flex;
			height: 80rpx;
			border-bottom: 1px solid #ccc;
			padding: 20rpx 0px;
			position: relative;

			text {
				flex: 1;
			}

			.tel {
				background-image: url('../../static/shouji.png');
				background-size: 50rpx;
				background-repeat: no-repeat;
				background-position: 35rpx 20rpx;
			}

			.lock {
				background-image: url('../../static/mima.png');
				background-size: 50rpx;
				background-repeat: no-repeat;
				background-position: 35rpx 20rpx;
			}

			.dun {
				background-image: url('../../static/yanzhengma.png');
				background-size: 50rpx;
				background-repeat: no-repeat;
				background-position: 35rpx 20rpx;
			}

			input {
				flex: 8;
				padding: 20rpx;
			}

			.vercode {
				background-color: #cccccc;
				font-size: $uni-font-size-sm;
				position: absolute;
				right: 30rpx;
				top: 15px;
			}

		}

		button {
			background-color: $ltt-primary-color;
			color: #ffffff;

		}

	}
</style>
